<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="轮播名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="轮播图">
      <el-upload
        :action="action"
        :limit="1"
        list-type="picture-card"
        :file-list="FileList"
        :before-remove="remove"
        :on-success="success"
        :on-preview="handlePictureCardPreview"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="form.imageUrl" alt="" />
      </el-dialog>
      <!-- <el-upload
        class="upload-demo"
        drag
        :action="action"
        multiple
        :limit="1"
        accept="image/png,image/jpeg,image/jpg"
        list-type="picture"
        
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload> -->
    </el-form-item>
    <el-form-item label="是否激活">
      <el-switch v-model="form.bState" :active-value="1" :inactive-value="0">
      </el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="target('submit')">立即创建</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  layout: "admin",
  computed: {
    action() {
      let baseURL = this.$axios.defaults.baseURL;
      return `${baseURL}/admin/tool/update`;
    },
  },
  mounted() {
    if (this.$route.params.id != "data") {
      this.target("init");
    }
  },

  data() {
    return {
      form: {
        name: "",
        imageUrl: "",
        bState: 0,
      },
      dialogVisible: false,
      FileList: [],
    };
  },
  methods: {
    target(key) {
      switch (key) {
        case "init":
          this.getData();
          break;
        case "add":
          this.$router.push({
            path: "/admin/banner/add/data",
          });
          break;
        case "submit":
          this.submit();
          break;
        default:
          break;
      }
    },
    async getData() {
      let data = await this.$axios.post(
        `admin/banner/find/${this.$route.params.id}`,
        {
          page: this.page,
        }
      );
      this.form = data.data;
      this.FileList = [
        {
          name: "food.jpg",
          url: data.data.imageUrl,
        },
      ];
      //   this.dialogVisible = true;
    },
    async submit() {
      let data = await this.$axios.post("/admin/banner/update", this.form);
      console.log(this);
      this.$message.success("更新成功");
      this.$router.go(-1);
    },
    success(response, file, fileList) {
      this.form.imageUrl = response.data.url;
      //   this.dialogVisible = true;
    },
    remove(file, fileList) {
      this.form.imageUrl = "";
      this.dialogVisible = false;
    },
    handlePictureCardPreview(file) {
      //   this.form.imageUrl = file.url;
      //   this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>